<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="store.getGoods()"
    :columns="columns"
    hover
    bordered
  >
    <template #name="{ row }">
      <b>{{ row.goods_name }}</b>
    </template>
    <template #count="{ row }">
      <t-input-number v-model="row.count" @change="store.update()" theme="normal" align="center" class="no-border" autoWidth/>
    </template>
    <template #right="{ rowIndex }">
      <t-button theme="danger" shape="square" variant="text" @click="store.del(rowIndex)">
        <template #icon>
          <t-icon name="close" size="20px" />
        </template>
      </t-button>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'
  import store from './store'

  const emit = defineEmits(['update'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('inbound.goods.code'),
    colKey: 'goods_code'
  }, {
    title: plugin.t('inbound.goods.name'),
    colKey: 'goods_name',
    cell: 'name'
  }, {
    title: plugin.t('inbound.goods.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }, {
    colKey: 'right',
    align: 'right',
    cell: 'right',
    fixed: 'right',
    width: 60
  }]
</script>

